import React, { Component } from "react";
import store from './store';
import {connect} from 'react-redux';

const TodoList = (props)=>{
    const {inputValue,list,handleInputChange,handleClick,handleRemoveItem} = this.props
        return (
            <div>
                <input onChange={handleInputChange} value={inputValue} />
                <button onClick={handleClick}>提交</button>
                <ul>
                    {
                        list.map((item,index)=>{
                            return <li onClick={handleRemoveItem.bind(this,index)} key={index}>{item}</li>
                        })
                    }
                </ul>
            </div>
        )
}


/* class TodoList extends Component{
    render(){
        const {inputValue,list,handleInputChange,handleClick,handleRemoveItem} = this.props
        return (
            <div>
                <input onChange={handleInputChange} value={inputValue} />
                <button onClick={handleClick}>提交</button>
                <ul>
                    {
                        list.map((item,index)=>{
                            return <li onClick={handleRemoveItem.bind(this,index)} key={index}>{item}</li>
                        })
                    }
                </ul>
            </div>
        )
    }   
} */

const mapStateToProps = (state) => {
    return {
        inputValue:state.inputValue,
        list:state.list
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        handleInputChange(e){
           // console.log(e.target.value)
           const action = {
               type:'change_input_value',
               inputValue:e.target.value
           }
           dispatch(action);
        },
        handleClick(){
            const action = {
                type:'add_item'
            }
            dispatch(action);
        },
        handleRemoveItem(index){
            const action = {
                type:'remove_item',
                index
            }
            dispatch(action);
        }
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(TodoList) //  让TodoList组建和store连接